import React from 'react';
import { useState, useEffect } from 'react'
import axios from 'axios';
import { Link, useHistory } from 'react-router-dom'
const Home = () => {
    const [list, setList] = useState([]);

    const his = useHistory()  // 等价于 this.props.history

    console.log('his', his);
    useEffect(() => {
        // 请求学校列表
        axios.get('https://api.i-lynn.cn/college').then(res => {
            console.log(res);
            setList(res.data.data.list1)
        })
    }, []);
    return (
        <div>
            <p>首页页面</p>
            <ul>
                {/* 使用查询字符串的形式传参 */}
                {/* {
                    list.map(item => <li key={item.id}><Link to={'/detail?id=' + item.id}>{item.school_name}</Link></li>)
                } */}
                {/* 使用动态路由/restful 风格传参 */}
                {/* {
                    list.map(item => <li key={item.id}><Link to={'/detail/' + item.id}>{item.school_name}</Link></li>)
                } */}

                {/* 编程式导航 */}
                {
                    list.map(item => <li key={item.id} onClick={() => {
                        his.push('/detail/' + item.id)
                    }}>{item.school_name}</li>)
                }
            </ul>
        </div>
    );

}

export default Home;
